import React, { useMemo, useState, useImperativeHandle, forwardRef, useRef } from "react"
import { getPreviewDetail } from "@Api/sysApi/productApi"
import { message, Space, Tabs, Button, ImgDefault, Spin, Icon } from '@bytedance/mona-ui';
import EditItemBox from "./editItemBox"
function EditProdect(props, ref) {
    const { editProdectId, onChangeUpData } = props

    if (!editProdectId || !editProdectId.length) return null // 如果没有编辑商品id，则不渲染编辑容器
    const [listDeteail, setListDeteail] = useState<any>([])
    function someMethod() {
        return listDeteail
    }
    useImperativeHandle(ref, () => ({
        someMethod,
    }));
    // const [setLidinStatus]
    useMemo(async () => {
        // 根据editProdectId获取商品详情
        setListDeteail(editProdectId.map(item => {
            item.lodinStatus = true
            item.errStatus = false
            item.detail = null
            return item
        }))
        const getItemListStatus = editProdectId.map(item => {
            return getDetaulFunc(item)
        })
        Promise.all(getItemListStatus).then(res => {
            console.log('请求到了全部00', res)
        })

        // const res = await getPreviewDetail({
        //     product_id: editProdectId[0].id
        // })
        // console.log('res', res)
        // if (res.code === 10000) {
        //     setListDeteail(res.data)
        //     return
        // }
        // message.error("网络异常 请稍后重试")
        // setListDeteail(res.data)
    }, [editProdectId])

    // 获取商品详情
    function getDetaulFunc(item: any) {
        setListDeteail([...editProdectId.map(list => {
            if (list.id === item.id) {
                item.lodinStatus = true
                item.errStatus = false
                item.detail = null
            }
            return list
        })])
        return getPreviewDetail({
            product_id: item.id
        }).then(res => {
            if (res.code === 10000) {
                setListDeteail([...editProdectId.map(list => {
                    if (list.id === res.data.product_id_str) {
                        list.detail = res.data
                        list.lodinStatus = false
                    }
                    return list
                })])
                return res.data
            }
            message.error("网络异常 请稍后重试")
            setListDeteail([...editProdectId.map(list => {
                if (list.id === item.id) {
                    list.lodinStatus = false
                    list.errStatus = true
                }
                return list
            })])
            return res
        }).catch(err => {
            message.error("网络异常 请稍后重试")
            setListDeteail([...editProdectId.map(list => {
                if (list.id === item.id) {
                    list.lodinStatus = false
                    list.errStatus = true
                }
                return list
            })])
            return err
        })
    }
    const EdItemRef = useRef([])
    const [selectItem, setSelectItem] = useState(editProdectId[0].id)

    return <>
        {!!listDeteail.length && listDeteail.length > 1 && <div className="topSelectItem">
            <Tabs
                activeKey={selectItem}
                onChange={(e) => {
                    // EdItemRef.current[e].getFocus()

                    EdItemRef.current[e]?.scrollIntoView({ behavior: 'smooth' })
                    setSelectItem(e)
                }}
                size="small"

            >
                {/* <Tabs.TabPane
                    key="statr"
                    tab={'开始'}
                ></Tabs.TabPane> */}
                {listDeteail.map((item, idnex) => {
                    // console.log('item', item)
                    return <Tabs.TabPane
                        key={item.id}
                        tab={(
                            <Spin spinning={item.lodinStatus}>
                                <Space>
                                    <ImgDefault imgSrc={item.detail?.img} width={40} height={40}></ImgDefault>
                                    <Space direction="vertical" style={{
                                        fontSize: 11
                                    }}>
                                        <div style={{
                                            // 省略号
                                            width: 100,
                                            overflow: 'hidden',
                                            textOverflow: 'ellipsis',
                                            whiteSpace: 'nowrap'
                                        }}>{item.detail?.name}</div>
                                        <div>ID:{item.id}</div>

                                    </Space>
                                </Space>
                            </Spin>

                        )}
                    ></Tabs.TabPane>
                })}
            </Tabs>
        </div>}
        <Space direction="vertical" size="small" style={{ width: '100%', boxSizing: 'border-box' }}>
            {/* <div
                ref={(el) => {
                    if (el) {
                        EdItemRef.current['statr'] = el
                    }
                }}
                className="start">
                <Button type="secondary" icon={<Icon type="AiDrawIcon"></Icon>}>一键智能编辑</Button>
            </div> */}

            <div className="itemList">
                {listDeteail.map(item => {
                    return <div ref={(el) => {
                        // console.log('el', el)
                        if (el) {
                            EdItemRef.current[item.id] = el
                        }
                    }}><EditItemBox
                        item={item}
                        key={item.id}
                        reLoadDeteail={getDetaulFunc}
                        onChange={(e) => {
                            item.setReForData = e
                            onChangeUpData(listDeteail)
                        }}
                        onChangeLodinStatus={(e) => {
                            // onChangeUpData(e)
                            item.aiOuterStatus = e
                            onChangeUpData(listDeteail)
                        }}
                    ></EditItemBox></div>
                })}
            </div>

            {/* <button onClick={() => {
          console.log('listDeteail', listDeteail)
      }}>获取数组数据</button> */}
        </Space>
    </>


}

export default forwardRef(EditProdect)